<!-- 访客 -->
<template>
	<loading-page v-if="showSkeleton&&!dataList.length" />
	<view class="list">
		<template v-for="(item,index) in dataList" :key="index">
			<view class="item">
				<view class="avatar">
					<lazy-load-image :image="item.img" :avator="true" :errorImg="config.errorImage.avator" imgMode='aspectFill' height="88rpx" borderRadius="44" />
				</view>
				<view class="info">
					<text class="strong">{{item.nickname}}</text>
					<text class="small">{{item.message}}</text>
				</view>
				<view class="more" @click.stop="moreMenu(`#more_${index}`,item)" :id="`more_${index}`">
					<icon class="iconfont icon">&#xe605;</icon>
				</view>
			</view>
		</template>
	</view>
	<!-- 更多菜单 -->
	<view class="menu" @click="data.menu.show=false" v-if="data.menu.show">
		<view class="menu-mask"></view>
		<view class="menu-content" :style="{top:`${data.menu.top}px`,left:`${data.menu.left}px`}">
			<navigator class="menu-item" :url="`/subpages/chat/chat?conversationID=${data.menu.mid}&nick=${encodeURIComponent(data.menu.nickname)}`" :hover-stop-propagation="true">
				<text>在线联系</text>
			</navigator>
		</view>
	</view>
	<!-- 空数据 -->
	<empty v-if="!dataList.length&&!showSkeleton" />
	<!-- 更多数据 -->
	<uni-load-more :status="loadMore.status" v-if="loadMore.show" :contentText="loadMore.txt"></uni-load-more>
</template>
<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue';
	import { onLoad, onReady, onReachBottom } from '@dcloudio/uni-app';
	import useGetList from '@/common/hooks/useGetList.js';
	import config from '@/uni.config.js';
	const { getDataList, dataList, page, loadMore, showSkeleton, reachBottom } = useGetList();
	const _this = getCurrentInstance();
	onReachBottom(() => {
		reachBottom();
	});
	const data = reactive({
		menu: {
			show: false,
			top: 0,
			left: 0,
			mid: '',
			nickname: ''
		}
	});
	// 初始化数据
	function init() {
		getDataList({
			url: '/crm/user/spaceUser',
			showLoading: false
		});
	}
	init();
	// 更多
	function moreMenu(id, item) {
		data.menu.mid = item.mid;
		data.menu.nickname = item.nickname;
		const query = uni.createSelectorQuery().in(_this);
		query.select(id).boundingClientRect(res => {
			data.menu.show = true;
			data.menu.top = res.top + 12;
			data.menu.left = res.left - 80;
		}).exec();
	}
</script>
<style lang="scss">
	@import '@/common/css/base.scss';
	page {
		background-color: $bgColor;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.list {
		padding: 0 28rpx;
	}
	.item {
		@include flex;
		margin-top: 28rpx;
		padding: 28rpx;
		border-radius: 16rpx;
		background: #fff;
		.avatar {
			width: 88rpx;
			height: 88rpx;
			margin-right: 24rpx;
		}
		.info {
			@include flex(column);
			flex: 1;
			align-items: flex-start;
			.strong {
				max-width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 32rpx;
				color: #222;
			}
			.small {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
		.more {
			width: 36rpx;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 28rpx;
			.icon {
				color: #222;
			}
		}
	}
	.menu {
		&-mask {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 202209;
			background-color: rgba(0, 0, 0, 0);
		}
		&-content {
			position: fixed;
			z-index: 20220928;
			width: 210rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 15rpx 0 rgba(0, 0, 0, .2);
			background-color: #fff;
		}
		&-item {
			padding: 30rpx 40rpx;
			font-size: 32rpx;
			color: #222;
		}
	}
</style>
